<!--
 * @Author: wang_jl
 * @Date: 2020-12-30 10:15:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-26 14:42:10
 * @Description: 菜单标题选择
 -->
<template>
  <div ref="reference">
    <fks-select
      v-model="text"
      filterable
      :placeholder="LANG.ROUTE_TITLE"
      clearable
      style="width: 100%"
      @blur="selectBlur"
    >
      <fks-option
        v-for="item in titleList"
        :key="item.label"
        :value="item.value"
      >
        <div>
          <span style="float: left; font-size: 12px">{{ item.value }}</span>
          <span style="float: right; font-size: 12px">{{ item.label }}</span>
        </div>
      </fks-option>
    </fks-select>
  </div>
</template>

<script>
export default {
  name: 'TitleSelect',
  props: {
    title: {
      type: String
    },
    id: {
      type: String
    },
    readonly: Boolean
  },
  data() {
    return {
      titleList: []
    }
  },
  computed: {
    text: {
      get: function () {
        return this.title
      },
      set: function (val) {
        this.$emit('update:title', val)
      }
    }
  },
  mounted() {
    this.text = this.title
    this.initTitle()
  },
  methods: {
    //手动输入标题
    selectBlur(e) {
      this.text = e.target.value == '' ? this.text : e.target.value
    },
    // 遍历本地menu.js，处理菜单title
    initTitle() {
      const context = import('@/lang/global/menu.js')
      let tempKeys = []
      let tempVals = []
      context
        .then((res) => {
          tempKeys = Object.keys(res.default)
          tempVals = Object.values(res.default)
          tempKeys.forEach((item, index) => {
            let node = {
              label: tempVals[index],
              value: item
            }
            this.titleList.push(node)
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped>
</style>
 